import React from 'react';
import { forwardRef } from 'react';
import './index.scss';

export interface VisibilityProps {
  width?: string | number;
  height?: string | number;
  backgroundColor?: string;
  backgroundOpacity?: number;
  label?: string;
  value?: string | number;
  unit?: string;
  labelColor?: string;
  valueColor?: string;
  unitColor?: string;
  showGradientText?: boolean;
  gradientColors?: string[];
  showLabelShadow?: boolean;
  labelShadow?: {
    offsetX?: number;
    offsetY?: number;
    blur?: number;
    spread?: number;
    color?: string;
  };
  showValueShadow?: boolean;
  valueShadow?: {
    offsetX?: number;
    offsetY?: number;
    blur?: number;
    spread?: number;
    color?: string;
  };
  fontSize?: {
    label?: number;
    value?: number;
    unit?: number;
  };
  fontWeight?: {
    label?: string | number;
    value?: string | number;
    unit?: string | number;
  };
  letterSpacing?: {
    label?: string;
    value?: string;
    unit?: string;
  };
  onLabelClick?: () => void;
  onValueClick?: () => void;
  theme?: 'light' | 'dark';
  style?: React.CSSProperties;
  className?: string;
  onClick?: () => void;
  __designMode?: string;
  componentId?: string;
  _componentName?: string;
  forwardRef?: any;
}

const Visibility = forwardRef<HTMLDivElement, VisibilityProps>((props, ref) => {
  const {
    width = 194,
    height = 48,
    backgroundColor = 'rgba(0,0,0,0.27)',
    backgroundOpacity = 1,
    label = '能见度',
    value = '6907',
    unit = 'm',
    labelColor = '#FFFFFF',
    valueColor = '#1AD7FF',
    unitColor = '#1AD7FF',
    showGradientText = true,
    gradientColors = ['#FFFFFF', '#81C6FF'],
    showLabelShadow = true,
    labelShadow = {
      offsetX: 0,
      offsetY: 2,
      blur: 4,
      spread: 0,
      color: 'rgba(0,0,0,0.5)'
    },
    showValueShadow = true,
    valueShadow = {
      offsetX: 0,
      offsetY: 0,
      blur: 5,
      spread: 1,
      color: '#017DE7'
    },
    fontSize = {
      label: 18,
      value: 20,
      unit: 20
    },
    fontWeight = {
      label: 500,
      value: 'bold',
      unit: 'semibold'
    },
    letterSpacing = {
      label: '1px',
      value: '0px',
      unit: '0px'
    },
    onLabelClick,
    onValueClick,
    theme = 'dark',
    style = {},
    className = '',
    onClick,
    __designMode,
    componentId,
    _componentName,
    forwardRef: forwardRefProp,
    ...otherProps
  } = props;

  const componentStyle: React.CSSProperties = {
    width: typeof width === 'number' ? `${width}px` : width,
    height: typeof height === 'number' ? `${height}px` : height,
    '--background-color': backgroundColor,
    '--background-opacity': backgroundOpacity,
    '--gradient-start': gradientColors[0] || '#FFFFFF',
    '--gradient-end': gradientColors[1] || '#81C6FF',
    '--label-shadow': showLabelShadow 
      ? `${labelShadow.offsetX}px ${labelShadow.offsetY}px ${labelShadow.blur}px ${labelShadow.spread}px ${labelShadow.color}`
      : 'none',
    '--value-shadow': showValueShadow
      ? `${valueShadow.offsetX}px ${valueShadow.offsetY}px ${valueShadow.blur}px ${valueShadow.color}`
      : 'none',
    ...style
  } as React.CSSProperties;

  const handleLabelClick = (e: React.MouseEvent) => {
    e.stopPropagation();
    if (onLabelClick) {
      onLabelClick();
    }
  };

  const handleValueClick = (e: React.MouseEvent) => {
    e.stopPropagation();
    if (onValueClick) {
      onValueClick();
    }
  };

  const visibilityClassName = ['visibility', theme, className].filter(Boolean).join(' ');

  return (
    <div
      ref={ref}
      className={visibilityClassName}
      style={componentStyle}
      onClick={onClick}
      data-component-id={componentId}
      data-component-name={_componentName}
      data-design-mode={__designMode}
      {...otherProps}
    >
      {/* 背景容器 */}
      <div className="visibility-background" />

      {/* 标签文字 */}
      <div 
        className="visibility-label"
        style={{
          color: labelColor,
          fontSize: `${fontSize.label}px`,
          fontWeight: fontWeight.label,
          letterSpacing: letterSpacing.label
        }}
        onClick={handleLabelClick}
      >
        {label}
      </div>

      {/* 数值区域 */}
      <div className="visibility-value-area" onClick={handleValueClick}>
        <span 
          className={`visibility-value ${showGradientText ? 'gradient-text' : ''}`}
          style={{
            color: !showGradientText ? valueColor : undefined,
            fontSize: `${fontSize.value}px`,
            fontWeight: fontWeight.value,
            letterSpacing: letterSpacing.value
          }}
        >
          {value}
        </span>
        <span 
          className={`visibility-unit ${showGradientText ? 'gradient-text' : ''}`}
          style={{
            color: !showGradientText ? unitColor : undefined,
            fontSize: `${fontSize.unit}px`,
            fontWeight: fontWeight.unit,
            letterSpacing: letterSpacing.unit
          }}
        >
          {unit}
        </span>
      </div>
    </div>
  );
});

Visibility.displayName = 'Visibility';

export default Visibility; 